* {
    margin: 0;
    padding: 0;
    }
html, body {
    scroll-behavior: smooth;
    background: var(--black);
    font-family: var(--main-font);
    color: var(--white);
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--heading-font);
    color: var(--white);
    margin-bottom: 1.5vh;
    font-weight: 300;
}
h1 {
    font-size: var(--mainheadingfont);
    
    
}
h2 {
    font-size: var(--h2font);
}
h3 {
    font-size: var(--h3font);
}
h4 {
    font-size: var(--h4font);
}
h5 {
    font-size: var(--h5font);
}
h6 {
    font-size: var(--h6font);
}
p, ul, ol, body {
    font-size: var(--pfont);
    margin-bottom: 1.5vh;
}
a {
    color: var(--cyan);
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}
a:hover {
    color: var(--indigo);
}   

.button {
    background-color: var(--cyan);
    color: var(--black);
    padding: var(--h6font);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-size: var(--h6font);
    border-style: solid;
    border-width: 2px;
    border-color: var(--cyan);
    box-shadow: 1px 1px 10px var(--black);
}

.button:hover {
    background-color: transparent;
    color: var(--white);
    box-shadow: 2px 2px 5px var(--black);
}
.Main-Logo h1 {
    font-variant: small-caps;
    margin-bottom: 3vh;
}

.Main-Menu {
    background-color: var(--periwinkle);
    font-size: var(--h6font);
    font-variant: small-caps;
    padding: 1.5vh;
}
header, footer {
    margin-top: 3vh;
    margin-bottom: 3vh;
    
}
.image-link {
    text-decoration: none;
    margin: none;
    padding: none;
    inline-size: anchor-size(inline);
}



:root{
    scrollbar-color: var(--indigo) var(--black);
    }
    ::-webkit-scrollbar-thumb {
        background-color: var(--indigo);
        border-radius: 7px;
        }
    ::-webkit-scrollbar-track, ::-webkit-scrollbar {
        background-color: var(--black);
    }